<template>
  <div>
    <div class="blog-container">
      <div v-if="total > 0">
        <div class="blog-card" v-for="item in tableData" :key="item.id">
          <div class="blog-content">
            <a :href="'/front/blogDetail?blogId=' + item.id" target="_blank">
              <div class="blog-title">{{ item.title }}</div>
            </a>
            <div class="blog-description">{{ item.descr }}</div>
            <div class="blog-meta">
              <div class="blog-stats">
                <span class="stat-item">
                  <i class="el-icon-user"></i> {{ item.userName }}
                </span>
                <span class="stat-item">
                  <i class="el-icon-view"></i> {{ item.readCount }}
                </span>
                <span class="stat-item">
                  <i class="el-icon-star-off"></i> {{ item.likesCount }}
                </span>

                <span
                  v-if="showOpt"
                  class="action-btn delete-btn"
                  @click="del(item.id)"
                >
                  <i class="el-icon-delete"></i>删除
                </span>
                <span
                  v-if="showOpt"
                  class="action-btn edit-btn"
                  @click="editBlog(item.id)"
                >
                  <i class="el-icon-edit"></i>编辑
                </span>
              </div>
              <div class="blog-tags">
                <el-tag
                  v-for="(tag, index) in JSON.parse(item.tags || '[]')"
                  :key="index"
                  class="blog-tag"
                  effect="light"
                >
                  {{ tag }}
                </el-tag>
              </div>
            </div>
          </div>
          <div class="blog-image">
            <img :src="item.cover" alt="" class="cover-image" />
            <div class="image-overlay"></div>
          </div>
        </div>
      </div>

      <div v-if="total === 0" class="no-data">
        <i class="el-icon-document"></i>
        <p>暂无数据</p>
      </div>
      <div style="margin-top: 10px" v-if="total">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<style scoped>
.blog-container {
  min-height: 80vh;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.blog-card {
  display: flex;
  padding: 24px;
  margin-bottom: 20px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.7) 100%
  );
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.blog-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transition: left 0.5s ease;
}

.blog-card:hover::before {
  left: 100%;
}

.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

.blog-content {
  flex: 1;
  padding-right: 20px;
}

.blog-title {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 12px;
  line-height: 1.4;
  transition: all 0.3s ease;
  cursor: pointer;
}

.blog-title:hover {
  color: #667eea;
  transform: translateX(5px);
}

.blog-description {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.blog-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  align-items: center;
  color: #888;
  font-size: 13px;
  transition: all 0.3s ease;
}

.stat-item:hover {
  color: #667eea;
  transform: scale(1.05);
}

.stat-item i {
  margin-right: 4px;
  font-size: 14px;
}

.action-btn {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.delete-btn {
  color: #f56565;
  background: rgba(245, 101, 101, 0.1);
}

.delete-btn:hover {
  background: rgba(245, 101, 101, 0.2);
  transform: scale(1.05);
}

.edit-btn {
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
}

.edit-btn:hover {
  background: rgba(102, 126, 234, 0.2);
  transform: scale(1.05);
}

.blog-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.blog-tag {
  border-radius: 20px !important;
  font-size: 12px !important;
  padding: 4px 12px !important;
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  color: white !important;
  border: none !important;
  transition: all 0.3s ease !important;
}

.blog-tag:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

.blog-image {
  width: 160px;
  height: 120px;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.blog-card:hover .cover-image {
  transform: scale(1.1);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    rgba(102, 126, 234, 0.3),
    rgba(118, 75, 162, 0.3)
  );
  opacity: 0;
  transition: all 0.3s ease;
}

.blog-card:hover .image-overlay {
  opacity: 1;
}

.no-data {
  text-align: center;
  padding: 60px 20px;
  color: #888;
}

.no-data i {
  font-size: 48px;
  margin-bottom: 16px;
  color: #ccc;
}

.no-data p {
  font-size: 16px;
  margin: 0;
}
</style>

<script>
export default {
  name: "BlogList",
  props: {
    categoryName: null,
    type: null,
    showOpt: false,
  },
  data() {
    return {
      tableData: [], // 所有的数据
      pageNum: 1, // 当前的页码
      pageSize: 10, // 每页显示的个数
      total: 0,
    };
  },
  watch: {
    // 监听数据变化  加载最新数据
    categoryName() {
      this.loadBlogs(1);
    },
  },
  created() {
    this.loadBlogs(1);
  },
  methods: {
    editBlog(blogId) {
      window.open("/front/newBlog?blogId=" + blogId);
    },
    del(id) {
      // 单个删除
      this.$confirm("您确定删除吗？", "确认删除", { type: "warning" })
        .then((response) => {
          this.$request.delete("/blog/delete/" + id).then((res) => {
            if (res.code === "200") {
              // 表示操作成功
              this.$message.success("操作成功");
              this.loadBlogs(1);
            } else {
              this.$message.error(res.msg); // 弹出错误的信息
            }
          });
        })
        .catch(() => {});
    },
    loadBlogs(pageNum) {
      if (pageNum) this.pageNum = pageNum;
      let url;
      switch (this.type) {
        case "user":
          url = "/blog/selectUser";
          break;
        case "like":
          url = "/blog/selectLike";
          break;
        case "collect":
          url = "/blog/selectCollect";
          break;
        case "comment":
          url = "/blog/selectComment";
          break;
        default:
          url = "/blog/selectPage";
      }
      this.$request
        .get(url, {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            categoryName:
              this.categoryName === "全部博客" ? null : this.categoryName,
            title: this.$route.query.title,
          },
        })
        .then((res) => {
          this.tableData = res.data?.list;
          this.total = res.data?.total;
        });
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum);
    },
  },
};
</script>

<style scoped>
.blog-box {
  display: flex;
  grid-gap: 15px;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
}
.blog-box:first-child {
  padding-top: 0;
}
.blog-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  cursor: pointer;
}
.blog-title:hover {
  color: #2a60c9;
}
.card {
  padding: 20px;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}
</style>